<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吴岱宬的个人博客-留言板</title>
    <style>
        .header{
            display: flex;
            align-items: center;
            width: 1000px;
            margin: 30px auto 30px auto;
        }
        .header img{
            width: 80px;
            height: 80px;
            border-radius: 35%;
        }
        .header .text h3{
            margin-bottom: 5px;
        }
        .header .text p{
            font-family: 楷体;
        }
        body{
            background-image:url(./20191010190410_inzoa.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .nav{
            display: flex;
            justify-content: center;
            width: 1000px;
            margin: auto;
            background-color: aliceblue;
            text-align: center;
            padding: 10px 0;
        }
        .nav a{
            display: inline-block;
            text-decoration: none;
            color: black;
            background-color: aliceblue;
            padding: 25px 75px;
        }  
        .nav a:hover{
            color: aliceblue;
            background-color: sienna;
        }
        .plant{
            background-color: aliceblue;
            align-items: center;
            width: 960px;
            margin: 30px auto 30px auto;
            padding: 20px;
        }
        #a{
            font-family: 楷体;
            font-size: 70px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
     <img src="./00我的头像.jpg" width="70px">
        <div class="text">
         <h3>吴岱宬的个人博客</h3>
         <p>投身天地这熔炉，总有些梦想和意志会因此薪火相传</p>
        </div>
    </div>
    <div class="nav">
        <a href="file:///C:/Users/21299/Desktop/HTML+css/%E4%BB%BB%E5%8A%A1%E4%B8%806.30/%E9%A6%96%E9%A1%B5.html">首页</a>
        <a href="file:///C:/Users/21299/Desktop/HTML+css/%E4%BB%BB%E5%8A%A1%E4%B8%806.30/%E4%B8%AA%E4%BA%BA%E4%BB%8B%E7%BB%8D.html">个人介绍</a>
        <a href="file:///C:/Users/21299/Desktop/HTML+css/%E4%BB%BB%E5%8A%A1%E4%B8%806.30/%E4%BD%9C%E5%93%81.html">作品</a>
        <a href="file:///C:/Users/21299/Desktop/HTML+css/%E4%BB%BB%E5%8A%A1%E4%B8%806.30/%E7%88%B1%E5%A5%BD.html">爱好</a>
        <a href="file:///C:/Users/21299/Desktop/HTML+css/%E4%BB%BB%E5%8A%A1%E4%B8%806.30/%E7%95%99%E8%A8%80%E6%9D%BF.html">留言板</a>
    </div>
    <div class="plant">
    <h1>首页>留言板</h1>
    <hr>
    <form action="">
         <label>姓名： <input type="text" placeholder="请输入真实姓名"></label>
         <br><br>
         <label>联系电话： <input type="text" placeholder="请输入联系电话"></label>
         <br><br>
         <label>性别：</label>
        <input type="radio" name="gender" checked>男
        <input type="radio" name="gender">女
        <br><br>
        居住城市：
        <select>
            <option>长沙</option>
            <option>株洲</option>
            <option selected>湘潭</option>
            <option>其他</option>
        </select>
        <br><br>
        <label>联系邮箱： <input type="text" placeholder="请输入联系邮箱"></label>
        <br><br>
        留言：<textarea placeholder="请输入留言内容"></textarea>
        <br><br>
        <input type="checkbox"><label>是否期待快速回应</label>
        
        <br><br>
<button type="submit" onclick="aaa()">提交留言</button>
<button type="reset">重新填写</button>
        <br><br><br><br><br>
        <div id="a">感谢您的留言！！</div>
        <img src="./艾伦.jpg" width="960px">
    </form></div>

    <script>
        function aaa(){
            alert("留言提交成功！！")
        }
    </script>
</body>
</html>